<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>三个API</title>
  <script src="script/react.development.js"></script>
  <script src="script/react-dom.development.js"></script>
</head>

<body>
  <button id="btn">我是按钮</button>
  <div id="root"></div>

  <script>
    /*
    * React.createElement()
    *   - 用来创建一个React元素
    *   - 参数：
    *        1.元素的名称（html标签必须小写）
    *        2.标签中的属性
    *           - class属性需要使用className来设置
    *           - 在设置事件时，属性名需要修改为驼峰命名法 
    *       3.元素的内容（子元素）
    *   - 注意点：
    *       React元素最终会通过虚拟DOM转换为真实的DOM元素甚至可以转换成原生app的元素
    *       React元素一旦创建就无法修改，只能通过新创建的元素进行替换。一次性的，简化掉原生DOM的繁杂的修改DOM的操作
    *
    *
    * */

    // 创建一个React元素
    const button = React.createElement('button', {
      type: 'button',
      className: 'hello',
      onClick: () => {
        alert('你点我干嘛');
        //react的事件是函数形式
      }
    }, '点我一下');

    // 创建第一个div
    const div = React.createElement('div', {}, '我是一个div', button);


    // ReactDOM.render(div, document.getElementById('root')); // 老版本的React中使用方法  一步变两步
    // 获取根元素 根元素就是React元素要插入的位置 

    // 获取根元素
    const root = ReactDOM.createRoot(document.getElementById('root'));
    // 将元素在根元素中显示
    root.render(div);


    // 将元素在根元素中显示
    /*
    *   root.render()
    *       - 用来将React元素渲染到根元素中
    *       - 根元素中所有的内容都会被删除，被React元素所替换
    *       - 当重复调用render()时，React会将两次的渲染结果进行比较，
    *           它会确保只修改那些发生变化的元素，对DOM做最少的修改
    *
    * */





    // 获取按钮对象
    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => {
      // 点击按钮后，修改div中button的文字为click me   由于没办法修改所以只能先创建一对象来替换掉原来的对象（重新渲染根元素）
      const button = React.createElement('button', {
        type: 'button',
        className: 'hello',
        onClick: () => {
          alert('你点我干嘛')
        }
      }, 'click me');

      // 创建一个div
      const div = React.createElement('div', {}, '我是一个div', button);

      // 修改React元素后，必须重新对根元素进行渲染！！！！！
      // 当调用render渲染页面时，React会自动比较两次渲染的元素，只在真实DOM中更新发生变化的部分     diff算法
      //      没发生变化的保持不变
      root.render(div);
    });
  </script>

</body>

</html>